//lanyunDrop.js
/*
下拉刷新
*/
!(function(){
    var defaults = {
		onInit: function() {},
		onChange: function() {}
	};
    var lanyunDrop = function(el, options) {
        var self = this;
        self.settings = $.extend({}, defaults, options);
        self.boxs = {},
        el.each( function() {
			self.init(this);
		});
        return true;
    };
    lanyunDrop.prototype = {
        // 动态创建下拉刷新特效
        touchmove:function(){
            var _this = this;
            document.addEventListener('touchmove', function(evt){

                if(!_this.isDrop) return;
                var _box = $('#'+_this.boxid);
                if(_box.hasClass('touchend')) return;
                var touch = evt.touches[0]; //获取第一个触点
                _this.endY = Number(touch.pageY) - _this.startY;
                //console.log(_this.isDrop+'----'+_this.endY);
                if(_this.endY > 5) {
                    evt.preventDefault();
                    _box[0].style.transform = "translate3d(0, "+ _this.endY +"px, 0)";
                }
            },{ passive: false });
        },
        init:function(box) {
            if(!box) return;
            this.boxid = box.id;
            var body = document.getElementsByTagName('body');
            var newItem = document.createElement('div');
            newItem.className = 'slide-wrap';
            newItem.innerHTML = '<div class="slided">正在刷新。。。</div>'+'<div class="sliding">下拉刷新</div>';
            //let newItem = $('<div class="slided">正在刷新。。。</div>'+'<div class="sliding">下拉刷新</div>');
            //newItem.prependTo($(box));
            body[0].insertBefore(newItem, box);
            var dom2 = document.getElementsByClassName('slide-wrap');
            var _this = this;

            document.addEventListener('touchstart', function(evt) {
                //console.log(box.id);
                var touch = evt.touches[0]; //获取第一个触点
                _this.startY = Number(touch.pageY);
                //_this.isDrop = false;
                //var box = document.getElementById(id) || null;
                //console.log(document.body.scrollTop+'-------');
                if(_this.isDrop) return;
                $('#vue').removeClass('touchend');
                if(document.body.scrollTop>0) {
                    _this.isDrop = false;
                    _this.endY = 0;
                    return;
                }
                _this.isDrop = true;
                _this.touchmove();
            });

            document.addEventListener('touchend', function(evt){
                if(!_this.isDrop) return;
                if(_this.endY < 0) return;
                console.log('end---'+_this.isDrop +'---Y:'+_this.endY);
                var dom2 = $('.slide-wrap');
                var _box = $('#'+box.id);
                _box.addClass('touchend');
                if(_this.endY > 50){
                    dom2[0].childNodes[1].style.display='none';
                    dom2[0].childNodes[0].style.display='block';
                    console.log('---开始刷新');
                    _box[0].style.transform = "translate3d(0, 40px, 0)";
                    _this.endY = 0;
                    setTimeout(function(){
                        _this.isDrop = false;
                        _box[0].style.transform = "translate3d(0, 0, 0)";
                    },2000);
                }else{
                    console.log('----放弃');
                    _this.isDrop = false;
                    dom2[0].childNodes[1].style.display = 'none';
                    _box[0].style.transform = "translate3d(0, 0, 0)";
                }
            });
        }
    };
    $.fn.lanyunDrop = function(options) {
		return new lanyunDrop(this, options);
	};
})();
